let $ = layui.$;
export default class Users {
    constructor() {
        this.render()
        this.handel()
    }
    render() {
        let template = `
            <style>
                .layui-body{
                    padding:20px;
                }
                .layui-form-label {
                    text-align: center;
                }
                .layui-input-block {
                    margin-right: 10px;
                }
                #btnRight{
                    float:right
                }
                .layui-form-item{
                    display:inline-block
                }
                .searchButton{
                    margin-bottom:0px;
                }
            </style>
            <form class="layui-form layui-form-pane" lay-filter="searchForm">
                <div class="layui-form-item searchButton">
                    <div class="layui-form-item searchButton">
                        <label class="layui-form-label">请选择</label>
                        <div class="layui-input-inline">
                            <select name="type" lay-filter="aihao">
                                <option selected value="">全部</option>
                                <option value="username">用户名</option>
                                <option value="phoneNum">手机号</option>
                                <option value="priv">权限</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" name="value" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" id="searchBtn"><i class="layui-icon"></i>
                                搜 索</button>
                        </div>
                    </div>

                </div>
                <div id="btnRight" class="layui-btn-container" lay-event="Add">
                        <a id="addUserbtn" class="layui-btn layui-btn-sm layui-btn-radius" lay-event="getCheckData"><i
                        class="layui-icon"></i>增加</a>
                </div>
            </form>
            
            <table class="layui-hide" id="test" lay-filter="table"></table>
             
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit"><i class="layui-icon"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del"><i
                class="layui-icon"></i>删除</a>
            </script>
        `
        $('#content').html(template)
    };
    handel() {
        var table = layui.table;
        let form = layui.form
        form.render()
        let $ = layui.$
        table.render({
            elem: '#test',
            url: '/api/users/',
            toolbar: "#toolbarDemo",
            page: {
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                first: false,
                last: false,
                limit: 10,
                limits: [1, 3, 5, 10]
            },
            cols: [
                [{
                    field: 'username',
                    width: 150,
                    title: '用户名'
                }, {
                    field: 'pwd',
                    width: 150,
                    title: '密码'
                }, {
                    field: 'phoneNum',
                    width: 150,
                    title: '手机号'
                }, {
                    field: 'email',
                    title: '邮箱',
                    width: 220
                }, {
                    field: 'priv',
                    title: '权限',

                }, {
                    field: 'right',
                    title: '操作',
                    toolbar: '#barDemo'
                }]
            ],
            parseData: function (res) {
                return {
                    "code": 0,
                    "msg": "",
                    "data": res.rows,
                    "count": res.total
                }
            },
            request: {
                pageName: "current",
                limitName: "size"
            }
        });

        //监听行工具事件
        table.on('tool(table)', function (obj) {
            var data = obj.data;
            let id = data._id
            // console.log(data)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        type: "delete",
                        url: "/api/users/" + id,
                        data: data,
                        success() {
                            table.reload('test', {
                                page: {
                                    curr: 1
                                }
                            })
                        }
                    })
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    title: '修改',
                    type: 1,
                    area: '300px;',
                    shade: 0.8,
                    btnAlign: 'c',
                    move: false,
                    shadeClose: true,
                    btn: ['确定', '取消'],
                    content: ` <form class="layui-form" lay-filter="AddForm" id="addForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" required lay-verify="required"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input readonly="true" type="text" name="pwd" required lay-verify="required"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-block">
                            <input type="text" name="phoneNum" required lay-verify="required|phone"
                            autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" required lay-verify="required|email"
                            autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">权限</label>
                        <div class="layui-input-block">
                            <select name='priv'>
                                <option value="user">user</option>
                                <option value="admin">admin</option>
                            </select>
                        </div>
                    </div>
                    <button lay-submit lay-filter="updateBtn" style="display:none" id="updateBtn" data-id="${id}"></button>
                    <input type="hidden" id="updateId" data-id="${id}">
                </form>`,
                    success() {
                        $.ajax({
                            type: "get",
                            url: "/api/users/" + id,
                            success(user) {
                                console.log(user)
                                form.val('AddForm', user)
                            }
                        })
                        form.render()
                    },
                    yes() {
                        $('#updateBtn').click()
                    }
                })
            }

            //修改用户表单提交
            form.on("submit(updateBtn)", function () {
                console.log(form.val('AddForm'))
                $.ajax({
                    type: "put",
                    url: "/api/users/" + $('#updateId').attr("data-id"),
                    data: form.val('AddForm'),
                    success() {
                        table.reload('test')
                    }
                })
                layer.closeAll()
                return false
            })
        });

         //增加用户
         $('#addUserbtn').click(function () {
            layer.open({
                type: 1,
                title: "增加用户",
                area: "300px",
                shade: 0.8,
                id: 'LAY_layuipro',
                btn: ['确定', '取消'],
                btnAlign: 'c',
                move: false,
                content: `
                <form class="layui-form" lay-filter="AddForm" id="addForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" required lay-verify="required"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="text" name="pwd" required lay-verify="required"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-block">
                            <input type="text" name="phoneNum" required lay-verify="required|phone"
                            autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" required lay-verify="required|email"
                            autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">权限</label>
                        <div class="layui-input-block">
                            <select name='priv'>
                                <option value="user">user</option>
                                <option value="admin">admin</option>
                            </select>
                        </div>
                    </div>
                    <button lay-submit lay-filter="addBtn" style="display:none" id="addBtn"></button>
                </form>
                `,
                success() {
                    form.render()
                },
                yes() {
                    $('#addBtn').click()
                }
            })
        })


        //增加用户表单提交
        form.on("submit(addBtn)", function () {
            console.log(form.val('AddForm'))
            $.ajax({
                type: 'post',
                url: '/api/users',
                data: form.val('AddForm'),
                success() {
                    table.reload('test')
                }
            })
            layer.closeAll()
            return false
        });

        // 监听搜索操作
        $('#searchBtn').click(function () {
            console.log(form.val('searchForm'))
            $.ajax({
                type: "get",
                url: "/api/users/",
                data: form.val('searchForm'),
                success(data) {
                    console.log(data);
                    table.reload('test', {
                        page: {
                            curr: 1
                        },
                        where: {
                            ...form.val('searchForm')
                        }
                    }, 'data');
                }
            })
            //form.render()
            return false;
        });
    }
}